<template>
  <div class="detail">
    <h2 class="detail-header">详细信息</h2>
    <ApplicantInfoCard v-model:applyInfo="applyInfoData"></ApplicantInfoCard>
    <div class="detail-button">
      <Button info="返回" backColor="#20618C" :event="back"></Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import ApplicantInfoCard from "../components/ApplicantInfoCard.vue";
import Button from '../components/Button.vue'
import Detail from "../api/Detail";

const route = useRoute();
const router = useRouter();

let applyInfoData = ref({});

Detail.getInfo(~~route.query.id).then((res) => {
  applyInfoData.value = res;
});

const back = () => {
  // console.log(route.meta.isAssociation);

  if (route.meta.isAssociation) {

    router.push({
      name: 'AQuickManage'
    })
  } else {
    router.push({
      name: 'DQuickManage'
    })
  }
}
</script>

<style lang="scss" scoped>
$colors: (
  "t-blue": #21618d,
  //常用颜色--蓝
    "t-grey": #8a8888,
  //字体常用颜色--灰
    "t-white": #f5f5f5,
  //字体常用颜色--白
    "border": #707070 //边框颜色,,
);

.detail {
  width: 1300px;
  margin: 0 auto;
  margin-bottom: 100px;
  .detail-header {
    width: 100%;
    font-size: 2.8125rem;
    text-align: center;
    color: map-get($map: $colors, $key: t-grey);
  }
  .detail-button {
    width: 1129px;
    margin: 20px auto 0;
    // margin-top: 20px;
  }
}
</style>